<template>
  <div>
    <h1>Image 图片</h1>
    <h2>预览</h2>
    <div class="imageBox">
      <Images
        :src="src"
        width="200"
        text="查看图片"
        :preview-src-list="srcList"
      ></Images>
    </div>
     <p>其中 <code>src</code> 的值为缩略图的url， <code>preview-src-list</code> 的值为可预览的图片，可通过 <code>preview-src-list</code> 开启预览大图的功能。 </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Images
            :src=&quot;src&quot;
            width=&quot;200&quot;
            :preview-src-list=&quot;srcList&quot;&gt;
        &lt;/Images&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              src: require('./../../examples/assets/images/image1.png'),
              srcList: [
                require('./../../examples/assets/images/image1.png'),
                require('./../../examples/assets/images/image2.png')
              ]
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Images props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
  </div>
</template>
<script>
export default {
  name: 'testImage',
  data () {
    return {
      src: require('./../../../examples/assets/images/image3.png'),
      srcList: [
        require('./../../../examples/assets/images/image1.png'),
        require('./../../../examples/assets/images/image2.png'),
        require('./../../../examples/assets/images/image3.png'),
        require('./../../../examples/assets/images/image4.png')
      ],
      tableColumn: [{
        title: '属性',
        key: 'attribute'
      },
      {
        title: '说明',
        key: 'explain',
        tooltip: true
      },
      {
        title: '类型',
        key: 'type'
      },
      {
        title: '默认值',
        key: 'default'
      }
      ],
      tableData: [
        {
          attribute: 'src',
          explain: '显示的图片URL地址',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'preview-src-list',
          explain: '预览图片的列表',
          type: 'Array',
          default: '空'
        },
        {
          attribute: 'wdith',
          explain: '显示的图片的宽度,单位px',
          type: 'String',
          default: 120
        },
        {
          attribute: 'height',
          explain: '显示的图片的高度,单位px',
          type: 'String',
          default: 'auto'
        }
      ]
    }
  }
}
</script>
<style scoped lang="less">
  .imageBox {
    margin: 20px 0;
  }
</style>
